<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/moment.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor_lang/zh-cn.js"></script>

    <title>cate</title>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'新闻',iconCls:'icon-ok'" id="classify_name">
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" closed="true" data-options="iconCls:'icon-save'" style="width:700px;height:500px;padding:10px">
                <form id="ff" method="post" enctype ="multipart/form-data">
                    <div style="margin-bottom:20px;display:none" >
                        <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'id:',required:true">
                    </div>
                    <div style="margin-bottom:20px;display:none" >
                        <input class="easyui-textbox" id="paths" name="paths" style="width:100%" data-options="label:'paths:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'新闻标题 :',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        内容 ：<textarea  name="content" class="xheditor" style="width:500px;height: 280px" data-options="required:true"></textarea>
                    </div>
                    <a href="#" id="dataSumbit" class="easyui-linkbutton" data-options="iconCls:'icon-add'">提交</a>
                </form>
            </div>
            <div style="padding:5px 0;" id="ft">
                用户搜索：
                <input class="easyui-input" style="width:110px;height:20px" name="email" id="key">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px" onclick=doSearch()>Search</a>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $('#tt').tree({
        url: 'http://localhost:3000/cate/tree/1',
        method:'get',
        loadFilter: function(data){
            if (data.d){
                return data.d;
            } else {
                return data;
            }
        },
        onClick: function(node){ //点击一个新闻分类，显示该分类下的新闻
            var cateid = node._id;
            
            $('#dg').datagrid('options').paths =  node.path + ',' + node._id;
            $('#dg').datagrid('options').cateid =  cateid;
            var paths = $('#dg').datagrid('options').paths;
            $('#dg').datagrid('reload',{cateid:cateid,paths:paths});
        }
    });
    function doSearch(){
        var key = $('#key').val();
        $('#dg').datagrid('reload',{title:key});
    }
   
    $('#dg').datagrid({
        loadMsg: '加载中,请稍等',
        url:'http://localhost:3000/news/list',
        method: 'post',
        queryParams:{
            cateid:'',
            paths:''
        },
        fit:true,
        pagination:true,
        pageSize:5,
        pageList:[5,10,20,30,40,50],
        columns:[[
            {field:'ck',checkbox:true} ,
            {field:'title',title:'新闻标题',width:100,align:'center'} ,       
            {field:'content',title:'新闻内容',width:100,align:'center'} ,    
            {field:'dates',title:'新闻时间',width:200,align:'center',
                formatter: function(value,row,index){
                return moment(row.date).format('YYYY-MM-DD HH:mm:ss');
                }
            } ,                                                              
            {field:'operate',title:'操作',width:200,align:'center',
                formatter: function(value,row,index){
                return "<a href='javascript:void(0)' onclick=onDelete('"+row._id+"')>删除</a> <a href='javascript:void(0)' onclick=onUpdata('"+row._id+"')>修改</a> <a href='javascript:void(0)' onclick=onAppendTab('"+row._id+"')>查看评论</a>"
                }
            }                                                              
        ]],
        toolbar: [{
            iconCls: 'icon-add',
            handler: function(){
                if($('#dg').datagrid('options').paths){
                    $('#ff').find('#paths').val($('#dg').datagrid('options').paths);
                    $('#ff').form('clear');
                    $('#dlg').dialog('open');
                }else{
                    alert('请选择添加新闻的分类');
                }
                
            }
        },'-',{
            iconCls: 'icon-remove',
            handler: function(){
                var ids = [];
                var rows = $('#dg').datagrid('getSelections');
                if(rows.length>0){
                    for(var i in rows){
                        ids.push(rows[i]._id);
                    }
                }
                $.messager.confirm('记录删除', '确定要删除吗?', function(r){
                    if (r){
                        $.ajax({
                            url:`http://localhost:3000/news/data/removes`,
                            type:'post',
                            data:{
                                ids:ids.toString()
                            }
                        }).then(res=>{
                            if(res.status==200){
                                $.messager.show({
                                    title:'信息提示',
                                    msg:res.message,
                                    showType:'show'
                                });
                                $('#dg').datagrid('reload');
                            }
                            
                        });
                    }
                });
            }
        }],
        footer:'#ft'
    });
    $('#dataSumbit').click(function (){ 
        var formData = $('#ff').serializeJSON();
        formData.path = $('#dg').datagrid('options').paths;
        formData.cateid = $('#dg').datagrid('options').cateid;
        var url = 'http://localhost:3000/news/data';
        var type = 'post';
        if(formData._id.trim().length>0){
            url += `/${formData._id}`;
            type = 'put';
        }else{
            delete formData._id;
        }
        $.ajax({
            url:url,
            type:type,
            data:formData
        }).then(function (res) { 
            $('#dlg').dialog('close');
            $('#dg').datagrid('reload');
        });
     });

     function onDelete(id){
        $.messager.confirm('记录删除', '确定要删除吗?', function(r){
            if (r){
                $.ajax({
                    url:`http://localhost:3000/news/data/${id}`,
                    type:'delete'
                }).then(res=>{
                    if(res.status==200){
                        $.messager.show({
                            title:'信息提示',
                            msg:res.message,
                            showType:'show'
                        });
                        $('#dg').datagrid('reload');
                    }
                    
                });
            }
        });
        
     }

    function onUpdata(id) {
        $.ajax({
            url:`http://localhost:3000/news/data/${id}`,
            type:'get',
        }).then(function (res) { 
            $('#ff').form('load',res);
            $('#dlg').dialog('open');
        })
    }

    //查看评论 按钮点击事件
    function onAppendTab(id) {
        var title = '评论管理';
        var url = 'component/comments.html';
        if (top.jQuery('#tt').tabs('exists', title)) {
            top.jQuery('#tt').tabs('select' , title);
        } else {
            addTab(title,url);
            //将newsId存入top中
            top['newsId'] = id;
        }
        
        // parent.reloadTabGrid('评论管理',id);
    }
    //添加新tab
    function addTab(title,url){           
        var jq = top.jQuery;    
        
        if (jq("#tt").tabs('exists', title)){    
            jq("#tt").tabs('select', title);    
        } else {  
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';     
                jq("#tt").tabs('add',{    
                                    title:title,    
                                    content:content, 
                                    closable:true    
                                });
        }    
    }
    
</script>